<template>
	<view class="itemBox" :class="type == 2 ? 'yellow' : ''">
		
		<!--用户头像模板组件-->
		<template v-if="!isOrder">
			<UserByList2 @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)"></UserByList2>
		</template>
		
		<!--置顶图标-->
		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>
		
		<!--推广列表-->
		<template v-if="type == 1">
			<view class="flex u-margin-top-20">		
				<view class="productImg">
					<block v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null)&&(item.logo!=undefined)&&(item.logo!='undefined'))">
						<image class="img" mode="aspectFill" :src="toImages(item.logo)">
						</image>
					</block>
					<block v-else>
						<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.buy_images)"
						 :key="j"	:src="toImages(i)">
						</image>
					</block>
				</view>
				
				<view @click="details(item)" style="flex: 1;">
					<view class="lineP">
						<view class="title u-line-3">{{item[$t('item.name')] || $t("暂无信息")}}</view>
					</view>
					
					<view class="lineP flexClum u-margin-top-20">
						<view class="label title_red  u-font-24">
							<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
								:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
							{{$t("货源地")}}
						</view>
						<block v-if="item.hwdd">
							<view class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
								{{ replaceSpaceWithComma(item.hwdd) || $t("暂无信息")}}
							</view>	
						</block>
						<block v-else>
							<view v-if="lang=='zh'" class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
							{{ replaceSpaceWithComma(item.reach_city.mergename)|| $t("暂无信息") }}	
							</view>
							<view v-if="lang!='zh'" class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
							{{ replaceSpaceWithComma(item.reach_city.mergename_ru)|| $t("暂无信息") }}	
							</view>
						</block>
					</view>
					
					<view class="lineP" style="align-items: center;display: none;">
						<view class="block">
							{{ item[$t('item.goods_num')] || '' }}
						</view>
						<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
					</view>
					
					<view class="lineP title_red u-font-34" style="justify-content: flex-end;align-items: baseline;">
						<view style="width: 40%;">
							<image :src="toImages('/uploads/20240514/2910b0256c8740723c7527820a5339d0.png')" style="width: 40rpx;height: 20rpx;"></image>
							<text style="color: #999999;height: 30rpx;line-height: 30rpx;font-size: 24rpx; ">{{ item[$t('view_count')]}}</text>
						</view>

						<view v-if="lang==='zh'" style="width: 60%; text-align: right; ">
							{{ item[$t('desire_price')]}}
							<text class="small u-font-28 u-margin-left-10">
								{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
							</text>
						</view>
						<view v-if="lang !='zh'" style="width: 60%; font-size: 28rpx; text-align: right; ">
							{{ item[$t('desire_price')]}}
							<text class="small u-margin-left-10" style="font-size: 20rpx;">
								{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
							</text>
						</view>
					</view>
					
				</view>	
			</view>
		</template>
		
		
		<!--竞标列表-->
		<template v-if="type == 2">
			<view>
				
				<view class="flex u-margin-top-20">								
					<view class="productImg">
						<block v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null)&&(item.logo!=undefined)&&(item.logo!='undefined'))">
							<image class="img" mode="aspectFill" :src="toImages(item.logo)">
							</image>
						</block>
						<block v-else>
							<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.buy_images)"
							:key="j"	:src="toImages(i)">
							</image>
						</block>				
						<block v-if="lang==='zh'">
							<view v-if="((item.logo)||(item.buy_images.length!=0))" style="font-size: 24rpx; margin-top: -10rpx; z-index: 99;  width:220rpx; margin-left:10rpx; border-bottom-right-radius:20rpx;border-bottom-left-radius:20rpx; line-height: 40rpx; height: 40rpx; text-align: center; color: #fff !important;background-image: linear-gradient(to bottom, #ff0f47, #ffab96) !important;">
								{{$t('正在求购该商品')}}
							</view>	
						</block>
						<block v-if="lang!='zh'">
							<view v-if="((item.logo)||(item.buy_images.length!=0))" style="font-size: 16rpx; margin-top: -10rpx; z-index: 99;  width:220rpx; margin-left:10rpx; border-bottom-right-radius:20rpx;border-bottom-left-radius:20rpx; line-height: 40rpx; height: 40rpx; text-align: center; color: #fff !important;background-image: linear-gradient(to bottom, #ff0f47, #ffab96) !important;">
								{{$t('正在求购该商品')}}
							</view>	
						</block>
					</view>
									
					<view @click="details(item)" style="flex: 1;">						
						<view class="lineP">
							<view class="title u-line-3">{{item[$t('item.name')] || $t("暂无信息")}}</view>
						</view>					
						<view class="lineP flexClum u-margin-top-20">
							<view class="label title_red u-font-24" style="color: #ff7200;display: flex;align-items: center; justify-content: center; ">
								<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
									:src="HTTP_IMG_UTL+'tubiao1.png'"> </image>
								{{$t("目的地")}}
							</view>
				
							<block v-if="item.hwdd">
								<view class="text u-line-2 u-font-24 dizhi">
									{{ replaceSpaceWithComma(item.hwdd) || $t("暂无信息") }}
								</view>
							</block>
							<block v-else>
								<view v-if="lang=='zh'" class="text u-line-2 u-font-24 dizhi" >
								{{ replaceSpaceWithComma(item.reach_city.mergename)|| $t("暂无信息") }}	
								</view>
								<view v-if="lang!='zh'" class="text u-line-2 u-font-24 dizhi" >
								{{ replaceSpaceWithComma(item.reach_city.mergename_ru)|| $t("暂无信息") }}	
								</view>
							</block>
							
							<view style="margin-left: 55%;width: 100px;">
								<slot name="btns"></slot>						
							</view>
							<view style="clear: both;"></view>
						</view>					
					</view>					
				</view>
				
			</view>
		</template>
		
		<slot name="list"></slot>
		
		<!--时间与按钮-->
		<view class="bidding_address" style="padding-left: 0rpx; padding-right: 0rpx;">
			<view class="bidding_ares">
				<view class="bidding_time" style="display: none;">
					<text style="line-height: 50rpx;">{{ time("S", item.createtime) }}</text>
				</view>
			</view>
			<view class="bidding_btn" @click.stop="$emit('communicate',item,1,type)" v-if="!isOrder" style="width:250rpx; margin-top: 10rpx; margin-left:10rpx; margin-right: 10rpx;">
				<text class="btnStyle" style="background: linear-gradient(110deg, #f772d1 0%, #c872f2 100%);">
					{{ type == 1 ? $t(tg) : $t(jb) }}
				</text>
			</view>
			<view class="bidding_btn" style="margin-top: 10rpx;width:250rpx; " @click.stop="$emit('communicate',item,0,type)" v-if="!isOrder">
				<text class="btnStyle">
					{{ type == 1 ? $t('即时联系') : $t('即时联系') }}
				</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import FromToCountry from '@/components/FromToCountry.vue'
	import Tag from '@/components/Tag.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import UserByList2 from '@/components/UserByList2.vue'
	export default {
		components: {
			FromToCountry,
			Tag,
			UserByList2
		},
		props: {
			item: {
				type: [Array,Object],
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isOrder: {
				type: [Boolean,Number],
				default: false,
			}
		},
		computed: {
			toImages() {
				return (src) => {
					if(src.url!=undefined){
						return (this.isOrder ? src.url : IMAGE_URL + src)
					}else{
						src = src.replace(/'+IMAGE_URL+'/g, '');						
						return IMAGE_URL + src
					}
				}
			},
			storeImages() {
				return (sum, images) => {
					return (images && images.length > 0) ? [images[0]] : images
				}
			},
		},
		data() {
			return {
				HTTP_IMG_UTL,
				lang: getApp().globalData.lang,
				
				tg:'发起求购',
				jb:'参与订单',
			};
		},
		methods: {
			time(type = "MS", date1, str = "year"){
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
			replaceSpaceWithComma(str) {   //过滤横杠为逗号 清除两端逗号
				if(str){
					str = str.replace(/-/g, ',');
					str = str.replace(/^[,]+|[,]+$/g, '');
					return str;
				}else{
					return str;
				}
			},

			//详情
			details(i) {
				this.$u.route({
					url: "/pages/index/detail/detail",
					params: {
						id: i.id,
						// type: this.current + 1,
						type: i.type,
						releaseType: 'goods'
					}
				})
			},
		},
		mounted() {
			if(uni.getStorageSync('off')==false){
				this.tg = '发起求购'
				this.jb = '参与订单'
			}else{
				this.tg = '招标比价'
				this.jb = '参与竞标'
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.dizhi{
		width: 100%;height:40px;word-break:break-word;margin-top: 20rpx;
	}
	.itemBox {
		margin: 0 auto;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		&.yellow {
			background: #fefcf6;
		}

		.title_red {
			font-weight: 600;
			color: #e33a13;
		}

		.priceBox {
			background: linear-gradient(90deg, #fe4e31, #ffcd84);
			border-radius: 20rpx;
			padding: 15rpx 30rpx;
			color: #fff;
			font-size: 50rpx;
			padding-top: 40rpx;
			margin-top: -60rpx;
			margin-bottom: 10rpx;

			.small {
				margin-left: 10rpx;
				font-size: 30rpx;
			}

			&.jingpai {
				background: linear-gradient(-90deg, #fe4e31, #ffcd84);
				text-align: right;
			}
		}

		.lineP {
			margin: 0 auto;
			margin-bottom: 10rpx;
			display: flex;
			width: 90%;

			.block {
				border-radius: 10rpx;
				border: 1px solid #666;
				padding: 10rpx 6rpx;
				margin-right: 15rpx;
				width: 80rpx;
				text-align: center;
			}

			.label {
				// flex: 1;
			}

			.text {
				// margin-top: 10rpx;
				// flex: 1;
				// margin-left: 20rpx;
				overflow: hidden;
				// white-space: nowrap;
				text-overflow: ellipsis;
			}



			.price {
				font-size: 50rpx;
				font-weight: normal;

				.small {
					font-size: 24rpx;
				}
			}
		}

		.xiaorenBox {
			// position: absolute;
			// bottom: 80rpx;
			// transform: rotate(180deg, 180deg);

			.xiaoren {
				width: 220rpx;
				height: 100rpx;
				position: relative;
				// top: 90rpx;
			}
		}

		.flex {
			display: flex;
			justify-content: space-between;

			.flexClum {
				display: flex;
				flex-direction: column;
				align-content: center;
				align-items: flex-start;
				justify-content: center;

				&.jingpai {
					align-content: baseline;
					justify-content: flex-end;
					flex-wrap: wrap;
					align-items: flex-start;
					flex-direction: row;
				}


				.xiaoren {
					width: 220rpx;
					height: 100rpx;
					position: relative;
					top: 90rpx;
				}
			}
		}

		.productImg {
			position: relative;
			margin-right: 20rpx;
			.img {
				width: 240rpx;
				height: 270rpx;
				overflow: hidden;
				border-radius: 20rpx;
				// box-shadow: 0 0 20rpx #ddd;
			}
		}

		//地址信息
		.bidding_address {
			padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: flex-end;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				min-height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;


				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.title {
			// color: #e43b14;
			font-size: 30rpx;
			// border-bottom: 1rpx solid #cccccc;
			font-weight: 600;
			// padding-bottom: 50rpx;
			margin-bottom: 10rpx;
			word-break: break-word;
			height: 80rpx;
			// padding-left: 28rpx;

			&.none-border-bottom {
				border-bottom: none;
			}
		}

		.type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-left: 10rpx;
			padding-right: 22rpx;
			// width: 90%;
			// margin: 0 auto;
		}

		.address {
			margin-bottom: 32rpx;
			font-size: 30rpx;
			position: relative;
			padding-left: 45rpx;
			// font-weight: 600;

			// .warp {
			// 	width: 55%;
			// }

			.headline_img {
				position: absolute;
				left: 0;
				top: 4rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.label {
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}
	}
	

</style>